<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/cart.css">
</head>
<body>
    <div class="head1">
        <div class="he">
            <ul class="he2">
                <li>
                    <div class="welcome">
                        <p>欢迎<mark><em class="username"></em></mark>进入本站&nbsp;&nbsp;&nbsp;<span class="logout">注销</span></p>
                    </div>
                </li>
                <li><a href="./logon.html">登录</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;</li>
                <li>&nbsp;<a href="./regst.html">免费注册</a>&nbsp;</li>
                <li>&nbsp;<a href="">关于我们<span class="iconfont2 icon-jiantou1"></span></a></span></li>
                <li>&nbsp;<a href="">下载APP<span class="iconfont2 icon-jiantou1"></span></a>&nbsp;</li>
                <li>&nbsp;<a href="">帮助中心</a>&nbsp;</li>
                <li>&nbsp;<a href=""><span class="iconfont2 icon-xin"></span>收藏</a></li>
            </ul>
        </div>
    </div>

    <div class="head2">
        <div class="box">
            <a href="" class="logo"><img src="./img/logo.png"></a>
            <span>购物车</span>

            <div class="r">
                <p>订购热线</p>
                <h2>400-9993-513</h2> 
                <p>温馨提示:请您核对无误后拨出,谢谢!</p>
            </div>
        </div>
    </div>


    <div class="list_wk">
        <div class="list_w">
            <table id="tab" align="center" width="1205" cellspacing="0">
                <thead>
                    <tr id="tr_list">
                        <th>图片</th>
                        <th>名字</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>总价</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="bose">
                </tbody>
            </table>
        </div>
        <a id="jx" href="list.html">
            去购物
        </a>
        <input id="btns_wk" type="button" value="全选" />
    </div>

    <div class="goot_wk">
        <div class="foot">
            <div class="foot1">
                <ul class="foot_wk">
                    <li>关于我们 <span> / </span> &nbsp;</li>
                    <li> 配送政策 <span> / </span> &nbsp;</li>
                    <li> 招才纳贤 <span> / </span> &nbsp;</li>
                    <li> 帮助中心 <span> / </span> &nbsp;</li>
                    <li> 联系我们 <span> / </span> &nbsp;</li>
                    <li> 招商加盟 <span> / </span> &nbsp;</li>
                    <li> 网站地图 <span> / </span> &nbsp;</li>
                    <li> 词条部落</li>
                </ul><br>
                <p>Copyright 2016, 茶七网 TEA7.COM</p>
                <p>增值电信业务经营许可证 : B1.B2-20160011 &nbsp;&nbsp;&nbsp; 闽CP备14011677号-2</p>
                <p>服务时间 : 08:30-21:00 &nbsp;客服热线:400-9993-513（温馨提示 : 请您核对无误后拨出，谢谢！）</p>
                <span><img src="https://rr.knet.cn/static/images/logo/cnnic.png" alt=""></span>
                <span><img src="./img/cert.png" alt=""></span>
            </div>
            <div class="foot2">
                <div class="bos2">
                    <img src="./img/guanzhu_weixin_90.jpg" class="imgbos2">
                    <p><img src="./img/weixin.png" class="imgbos1"></p>
                    <p class="imgbos3">扫描关注微信公众号</p>
                </div>
                <div class="bos2">
                    <img src="./img/erweima.jpg" class="imgbos2">
                    <p class="imgbos4">APP</p>
                    <p class="imgbos3">扫描关注微信公众号</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="jquery.js"></script>
<script src="./js/checkAll.js"></script>
<script>
    class index{
        constructor(){
            this.dl = document.querySelector(".dl");
            this.zc = document.querySelector(".zc");
            this.welcome = document.querySelector(".welcome");
            this.logout = document.querySelector(".logout");
            this.uName = document.querySelector(".username")

            this.init();
            this.addevent();
        }

        init(){
            this.m = sessionStorage.getItem("usermsg");
            this.m = this.m ? JSON.parse(this.m) : {};
            if(this.m.user){
                this.uName.innerHTML = this.m.user;
                this.dl.style.display = "none";
                this.zc.style.display = "none";
                this.welcome.style.display = "block";
            }
        }
        addevent(){
            this.logout.onclick = function(){
                sessionStorage.removeItem("usermsg");
                location.href = "login.html";
            }
        }
    }

    new index;


    class Car{
        constructor(){
            this.tBody = document.querySelector("tbody");
            this.jx = document.getElementById("jx");
        }
        getData(){
            if(localStorage.getItem("goodsMsg")){
                this.gm = JSON.parse(localStorage.getItem("goodsMsg"));
                this.jx.style.display = "block";
            }else{
                this.gm = [];
            }
            this.display();
        }
        display(){
            var str = "";
            for(var i=0;i<this.gm.length;i++){
                str += `<tr index="${this.gm[i].goodsId}">
                            <td id="btnsb"><input type="checkbox"></input></td>
                            <td><img src="${this.gm[i].msg.pic}" alt="" class="pic"></td>
                            <td>${this.gm[i].msg.name}</td>
                            <td>${this.gm[i].msg.price}</td>
                            <td><input type="number" min="1" value="${this.gm[i].num}" class="number"></td>
                            <td>${ this.gm[i].msg.price * this.gm[i].num }</td>
                            <td class="delete">删除</td>
                        </tr>`;
            }
            this.tBody.innerHTML = str;
        }
        addEvent(){
            var that = this;
            this.tBody.onclick = function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.className === "delete"){
                    that.id = tar.parentNode.getAttribute("index");
                    tar.parentNode.remove();
                    that.changeData(function(i){
                        that.gm.splice(i,1);
                    });
                }
            }

            this.tBody.oninput = function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.className === "number"){
                    that.id = tar.parentNode.parentNode.getAttribute("index");
                    that.changeData(function(i){
                        that.gm[i].num = tar.value;
                    });

                    tar.parentNode.nextElementSibling.innerHTML = tar.value * tar.parentNode.previousElementSibling.innerHTML;
                }
            }
        }
        changeData(cb){
            for(var i=0;i<this.gm.length;i++){
                if(this.gm[i].goodsId === this.id){
                    cb(i);
                    break;
                }
            }
            localStorage.setItem("goodsMsg",JSON.stringify(this.gm));
            
        }
    }

    var c = new Car();
    c.getData();
    c.addEvent();


    $(function(){
        $("#btns_wk2").bindCheck($("#bose :checkbox"), $("#btns_wk"));
    });
</script>